<template>
    <div id="app">
        <ul ref="ul1">
            <li v-for="(item,index) in list" :key="index">
                {{item}}
            </li>
        </ul>
        <button @click="addItem">
            添加一项
        </button>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                list: ['a', 'b', 'c']
            }
        },
        methods: {
            addItem() {
                this.list.push(`${Date.now()}`);
                this.list.push(`${Date.now()}`);
                this.list.push(`${Date.now()}`);
                // const ulEle = this.$refs.ul1;
                //  // 因为是异步渲染，第一次点击添加完成以后没有更新DOM所以依旧打印出3
                // console.log(ulEle.childNodes.length);
                this.$nextTick(()=>{
                    // 异步渲染,$nextTick待DOM渲染完再回调
                    const ulEle=this.$refs.ul1;
                    console.log(ulEle.childNodes.length)
                })
            }
        },
    }
</script>